<template>
  <div class="knew_bg">
    <div class="ken_list" v-for="(item,index) of list" :key="index">
    <div class="ken_item" >
      <div class="ken_item_zz">
        <div class="ken_item_zz_le">
          <div class="ken_item_zz_le_tit">时间：  {{item.time}}</div>
          <div class="ken_item_zz_le_tit">名称：  {{item.name}} </div>
          <div class="ken_item_zz_le_tit">技术栈：  {{item.boos}} </div>
          <div class="ken_item_zz_le_er">
            <div class="le_er_le">项目职责:</div>
            <div class="le_er_re">
              {{item.perbol}}
            </div>
              </div>
        </div>
      </div>
    </div>
    </div>

    
    <div class="zengaoceng"></div>
  </div>
</template>

<script>
import xqtext from "../components/xqtext.vue";

  
  export default {

    data() {
      return {
       list:[]


    

      };
    },
    components: {
   xqtext
  },
   
    created() {
      this.list=this.$store.state.list
       if(this._isMobile()){
        this.$router.push('/main') 
      }else{
            
      }
    },
    mounted() {
      

    },
    

    methods:{
        _isMobile() {
	 let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
	 return flag;
},
    },
  
    
  };
</script>

<style scoped="scoped" lang="scss">
.ken_list{
  width: 90%;
  margin: auto;
  height: 300px;
  /* border: 1px solid #000; */
  display: flex;
  margin-top:70px ;
  align-items: center;
  justify-content: space-between;
}
.ken_item{
   width: 80%;
   margin: auto;
   height: 300px;
   background: #efefef;
   border-radius:8px ;
   background-size:cover;
   overflow: hidden;
   	box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.45);
}
.ken_item_zz{
  width: 100%;
  height: 100%;
    background: linear-gradient(to left, rgba(42, 159, 255, 0.2) 0%, #212120aa 60%, #212120 100%);
}
.ken_item_zz_le{
  width: 95%;
  height: 100%;

  color: #fff;
  margin: auto;
 
}
.ken_item_zz_le_tit{
  width: 100%;
  margin: auto;
  padding-top:20px ;
  text-align: left;
}
.ken_item_zz_le_er{
  width: 100%;
   margin: auto;
  margin-top:20px ;
  display: flex;
  
}
.le_er_re{
  width: 80%;
  margin-left:10px ;
  text-align: left;
}

.knew_bg{
  width: 90%;
  margin: auto;
  height: 92vh;
  overflow-y: scroll;
  margin-top:30px ;
  background: #fff;
 border-radius:10px ;
}
.zengaoceng{
  width: 100%;
  height: 50px;

}
::-webkit-scrollbar {
    width: 10px;
    background-color: #ffff
  }
 
  ::-webkit-scrollbar-thumb {
    width: 10px;
    /* 上下两头给个圆角 */
    background-color: #CBCBCB;
    border-radius: 10px;
    /* 还可以给它加个阴影 */
    /* box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);   */
  }
.ken_list:first-child .ken_item{
  background-image: url('../assets/img/xqq.jpg');
}
.ken_list:nth-child(2) .ken_item{
  background-image: url('../assets/img/xqq2.jpg');
}
.ken_list:nth-child(3) .ken_item{
  background-image: url('../assets/img/xqq3.jpg');
}



</style>
